<template>
  <div>
    <div class="sale">
      <el-card class="sale_card">
        <div class="sale_content">
          <div class="label">销售单</div>
          <div class="value">{{ detailForm.order_count }}</div>
        </div>
      </el-card>
      <el-card class="sale_card">
        <div class="sale_content">
          <div class="label">销售商品</div>
          <div class="value">{{ detailForm.order_quantity }}</div>
        </div>
      </el-card>
      <el-card class="sale_card">
        <div class="sale_content">
          <div class="label">销售金额(元)</div>
          <div class="value">
            {{ detailForm.order_total ? detailForm.order_total.toFixed(2) : 0 }}
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { handleApiResponse } from "@/utils/request.js";
import { GetGlassStoreShipStatistics } from "../../../../../wailsjs/go/api/HomeApi";

onMounted(() => {
  getSaleData();
});

const detailForm = ref({});
async function getSaleData(time = 1) {
  handleApiResponse(() => GetGlassStoreShipStatistics({ timeFlag: time })).then(
    (res) => {
      if (res.code == 0) {
        detailForm.value = res.data.list || {};
      }
    }
  );
}
defineExpose({
  getSaleData,
});
</script>

<style scoped lang="scss">
.sale {
  @apply w-full h-full flex justify-between;
  .sale_card {
    @apply w-[32%] h-[14.5vh];
    .sale_content {
      @apply w-full h-full flex flex-col justify-between items-center;

      .label {
        @apply w-full h-[6vh] text-[0.7rem] flex justify-center items-center;
      }
      .value {
        @apply w-full h-[5vh] text-[0.75rem] flex justify-center items-center font-bold;
      }
    }
  }
}
</style>